<template>
  <div class="onebox">
    <div class="main">
      <ex-table ref="table" :loading="loading" :table-column="tableColumn" :table-data="tableData"
        @pageSizeChange="handleSizeChange" @currentPageChange="handleCurrentChange">
        <template v-slot:results="{ scope }">
          <div v-if="scope.row.result==''">-</div>
          <div v-if="scope.row.result!=''">{{scope.row.updateTime}} - {{scope.row.userName}}：{{scope.row.result}}</div>
        </template>
      </ex-table>
      <!-- <div class="bt">营收成本比</div>
      <div class="list_box">
        <div class="list" v-for="(item,index) in revenueCost" :key="index">
          <div class="title" v-if="revenueCost.length!=0">
            {{item.detail}}
          </div>
        </div>
        <div class="list" v-if="revenueCost.length==0">
          <div class="title">
            暂无数据
          </div>
        </div>
      </div>
      <div class="bt">售卡异动</div>
      <div class="list_box">
        <div class="list" v-for="(item,index) in sellCard" :key="index">
          <div class="title">
            {{item.detail}}
          </div>
        </div>
        <div class="list" v-if="sellCard.length==0">
          <div class="title">
            暂无数据
          </div>
        </div>
      </div>
      <div class="bt">用卡异常</div>
      <div class="list_box">
        <div class="list" v-for="(item,index) in useCardAbnormal" :key="index">
          <div class="title">
            {{item.detail}}
          </div>
        </div>
        <div class="list" v-if="useCardAbnormal.length==0">
          <div class="title">
            暂无数据
          </div>
        </div>
      </div>
      <div class="bt">客流异常</div>
      <div class="list_box">
        <div class="list" v-for="(item,index) in passengerFlowAbnormal" :key="index">
          <div class="title">
            {{item.detail}}
          </div>
        </div>
        <div class="list" v-if="passengerFlowAbnormal.length==0">
          <div class="title">
            暂无数据
          </div>
        </div>
      </div> -->
    </div>
  </div>
</template>
<script>
  // components
  import Loading from "@/components/Loading/index";
  import handlePageMixin from "@/mixins/handlePageMixin";

  // api
  import {
    operationRisk,getwarningsList
  } from "@/api/warningComplaint";
  import {
    string
  } from "jszip/lib/support";

  export default {
    components: {},
    props: {
      merchantId: string,
    },
    mixins: [handlePageMixin],
    data() {
      return {
        loading: false,
        revenueCost: [], //营收成本
        sellCard: [], //售卡异常
        useCardAbnormal: [], //用卡异常
        passengerFlowAbnormal: [], //客流异常
        formInline:{
          merchantId: "",
        },
        tableData: [],
        tableColumn: [
          {
            prop: "createTime",
            label: "预警触发时间",
            width:"180"
          },
          {
            prop: "content",
            label: "预警事件"
          },
          {
            prop: "statusDict",
            label: "预警状态",
            width:"140"
          },
          {
            label: "处理结果",
            slot: true,
            slotName: "results",
          },
          {
            prop: "punishStatusDict",
            label: "处罚状态",
          },
          {
            prop: "detail",
            label: "备注",
          },
        ],
      };
    },
    computed: {},
    updated() {},
    created() {
      this.formInline.merchantId = this.merchantId
      this.getList();
    },
    methods: {
      handleChange(val) {
        console.log(val);
      },
      handleShow(data) {
        if (data == 1) {
          this.courtShow = !this.courtShow;
        } else if (data == 2) {
          this.courtShowOne = !this.courtShowOne;
        } else if (data == 3) {
          this.recordShow = !this.recordShow;
        } else if (data == 4) {
          this.recordShowOne = !this.recordShowOne;
        }
      },
      //列表
      getDetail() {
        var merchantId = this.merchantId;
        this.loading = true;
        operationRisk(merchantId)
          .then((res) => {
            this.revenueCost = res.result.revenueCost
            this.sellCard = res.result.sellCard
            this.useCardAbnormal = res.result.useCardAbnormal
            this.passengerFlowAbnormal = res.result.passengerFlowAbnormal
          })
          .finally(() => {
            this.loading = false;
          });
      },
      getList() {
        const params = {
          ...this.pageOptions,
          ...this.formInline,
        };
        this.loading = true;
        getwarningsList(params)
          .then((res) => {
            const {
              total,
              records
            } = res.result;

            this.tableData = records.map((item) => {
              if (item.type == 1) {
                item.typedict = "经营风险";
              } else if (item.type == 2) {
                item.typedict = "申诉预警";
              } else if (item.type == 3) {
                item.typedict = "法人预警";
              } else if (item.type == 4) {
                item.typedict = "司法风险";
              } else {
                item.typedict = "-";
              }
              return item;
            });
              this.$refs.table.pageOptions.total = total;
            })
            .finally(() => {
              this.loading = false;
            });
      },
    },
  };

</script>
<style lang="scss" scoped>
  .onebox {
    .main {
      padding: 0 20px;

      .bt {
        font-size: 24px;
        color: #333;
        font-weight: bold;
        margin-top: 40px;
      }

      .list_box {
        padding-top: 20px;
        padding-left: 28px;

        .list {
          margin-bottom: 20px;

          .title {
            font-size: 17px;
            color: #333;
          }

          .table {
            margin-top: 14px;
          }
        }
      }
    }
  }

</style>
